<script setup lang="ts">
const {waterForm} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
}>();

</script>


<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">水质 气相色谱法分析原始记录（B面）</h1>
      <div>SXLPHJ/JL/CX-22-62</div>
      <table class="table">
        <tr>
          <td colspan="10">
            <div class="table-td">
              标准曲线绘制
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>标准贮备液批号</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz.bzzbyph"/>
          </td>
          <td colspan="3">贮备液浓度(mg/L)</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz.zbynd"/>
          </td>
          <td colspan="2">贮备液有效日期</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz.zbyyxrq"/>
          </td>
        </tr>
        <tr>
          <td>编号</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td v-for="(item,index) in 4" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz[`bh${index}`]"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>标准使用液浓度( )</td>
          <td v-for="(item,index) in 9" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz[`bzsyynd${index}`]"/>
          </td>
        </tr>
        <tr>
          <td>标准加入量( )</td>
          <td v-for="(item,index) in 9" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz[`bzjrl${index}`]"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>定容体积（ ）</td>
          <td v-for="(item,index) in 9" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz[`drtj${index}`]"/>
          </td>
        </tr>
        <tr>
          <td>溶液浓度( )</td>
          <td v-for="(item,index) in 9" :key="index">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bzqxhz[`rynd${index}`]"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>校准曲线</td>
          <td colspan="9">
            <div>
              y=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.y"/>
            </div>
            <div>
              r=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.r"/>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="10">
            <div class="table-td">
              曲线校核点测定
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="2">样品编号</td>
          <td colspan="2">测定结果( )</td>
          <td colspan="2">相对 ( )</td>
          <td colspan="2">质控要求</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.bdatas.qxjhdcd" :key="index">
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.ypbh"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.cdjg"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.xd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.zkyq"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.sfhg"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="10">
            <div class="table-td">
              空白检查
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">样品编号</td>
          <td colspan="2">试样浓度( )</td>
          <td colspan="2">样品浓度( )</td>
          <td colspan="2">质控要求</td>
          <td colspan="2">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.kbycd" :key="index">
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.ypbh"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.synd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.ypnd"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.zkyq"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.sfhg"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="10">
            <div class="table-td">
              平行样测定
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="1">平行样编号</td>
          <td colspan="3" style="text-align: center;">
            <div style="display: flex;align-items: center;">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh1"/>
              与
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh2"/>
            </div>
          </td>
          <td colspan="3" style="text-align: center;">
            <div style="display: flex;align-items: center;">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh3"/>
              与
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh4"/>
            </div>
          </td>
          <td colspan="3" style="text-align: center;">
            <div style="display: flex;align-items: center;">
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh5"/>
              与
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.pxycd_fx.pxbh6"/>
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>测定浓度( )</td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd1"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd2"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd3"/>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd4"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd5"/>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx.cdnd6"/>
          </td>
        </tr>
        <tr>
          <td>
            <el-radio-group>
              <el-radio value="Value 1">相对偏差</el-radio>
              <el-radio label="Label 2 & Value 2">——————</el-radio>
            </el-radio-group>
          </td>
          <td colspan="3" v-for="(item,index) in 3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx[`xdpc${index}`]"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>质控要求</td>
          <td colspan="3" v-for="(item,index) in 3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx[`zkyq${index}`]"/>
          </td>
        </tr>
        <tr>
          <td>是否合格</td>
          <td colspan="3" v-for="(item,index) in 3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.pxycd_fx[`sfhg${index}`]"/>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="10">
            <div class="table-td">
              标准样品测定
            </div>
          </td>
        </tr>
        <tr>
          <td>标样批号</td>
          <td colspan="3">测定浓度（ ）</td>
          <td colspan="3">标准值（ ）</td>
          <td colspan="3">是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.bzycd" :key="index">
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.ypbh">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.cdnd">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.bzz">
            </el-input>
          </td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.sfhg">
            </el-input>
          </td>
        </tr>
        <tr>
          <td colspan="10">
            <div class="table-td">
              加标回收样测定
            </div>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>样品编号</td>
          <td>标液浓度( )</td>
          <td>加标量( )</td>
          <td colspan="2">加标后样品含量/浓度( )</td>
          <td colspan="2">原样品含量/浓度( )</td>
          <td>回收率( % )</td>
          <td>质控要求</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item,index) in waterForm.jbycd" :key="index">
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.ypbh">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.bznd">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jbl">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.jbhypnd">
            </el-input>
          </td>
          <td colspan="2">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.yyphl">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.hsl">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.zkyq">
            </el-input>
          </td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="item.sfhg">
            </el-input>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td>备注</td>
          <td colspan="9">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.bdatas.bnotes">
            </el-input>
          </td>
        </tr>
      </table>
    </el-card>
  </div>

</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 10%;
}

.table-td {
  display: flex;
  justify-content: center;
  font-weight: 500;
  color: #303133;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
